import ThemeBtn from '@/components/antd-comp/theme-btn'
import CreateApplication from '@/pages/ApplicationPage/components/CreateApplication'
import { useAssistantStore } from '@/store/assistantStore'
// import { useBuriedStore } from '@/store/buriedStore'
import { RectGoBackIcon } from '@/components/bs-icons/go'
import { Func } from '@/permissions/constants'
import { useDictStore } from '@/store/dictStore'
import { useFuncsStore } from '@/store/funcStore'
import { useBuriedEvent } from '@/util/buried'
import { Button } from 'antd'
import { useEffect, useRef, useState, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import '../css/board.less'
import '../css/styles.css'
import { userContext } from '../../../contexts/userContext'
export default function Header({
  topLineLoading,
  onSave,
  onLine,
  activeType = 'edit',
  setActiveType = (type: string) => {},
  propsRef
}) {
  /**
   * 功能权限限制
   */
  const { hasFuncPermission } = useFuncsStore()
  // ------埋点------
  const { applicationBuriedEvent } = useBuriedEvent()
  // const { updateBuriedInfo, updatePutAstBuriedCount } = useBuriedStore()

  const { t } = useTranslation()
  const navigate = useNavigate()
  const { assistantState, dispatchAssistant } = useAssistantStore()
  /* 编辑助手 */
  const [editShow, setEditShow] = useState(false)
  const needSaveRef = useRef(false)
  const { user } = useContext(userContext)
  useEffect(() => {
    if(user.user_name === 'admin') {
      loadTypeList()
    }else{
      //setSearchList([])
      setSearchListDialog([])
    }
    if (needSaveRef.current) {
      needSaveRef.current = false
      onSave({
        buriedInfo: {
          event_name: '【确定】按钮',
          page: '编辑智能体弹窗'
        }
      })
    }
  }, [assistantState])
  const handleEditSave = form => {
    // updateBuriedInfo({
    //   event_name: '【确定】按钮',
    //   page: '编辑智能体弹窗'
    // })
    // updatePutAstBuriedCount()
    dispatchAssistant('setting', { role_save_judgment: '1' })
    dispatchAssistant('setBaseInfo', form)
    setEditShow(false)
    needSaveRef.current = true
  }
  // 类型列表
  const [SearchListDialog, setSearchListDialog] = useState([])
  const { loadDictOptions } = useDictStore()
  const loadTypeList = (type = 'category') => {
    loadDictOptions(type).then(res => {
      const list = [...res]
      setSearchListDialog(list)
      res.unshift({
        id: 0,
        label: '全部类型',
        value: 'all'
      })
    })
  }
  return (
    <div className="flex items-center justify-between border-b px-4" style={{ background: '#FFFFFF', height: '68px' }}>
      <div className="flex items-center gap-2 py-4">
        <div className="cursor-pointer" onClick={() => navigate(-1)}>
          <RectGoBackIcon />
        </div>
        {/* <LeftOutlined className="cursonCase h-4 w-4" onClick={() => navigate(-1)} /> */}
        {/* {assistantState.logo ? (
          <img
            src={assistantState.logo}
            style={{ width: '24px', height: '24px', borderRadius: '5px' }}
            className="ml-4"
            alt=""
          />
        ) : (
          <TitleIconBg id={assistantState.id} className="ml-4">
            <AssistantIcon />
          </TitleIconBg>
        )} */}
        <span className="application_title">{assistantState.name}</span>
        {/* icon */}
        <div>
          <svg
            className="cursonCase"
            onClick={e => {
              applicationBuriedEvent({
                page: '智能体配置页面',
                event_name: '【编辑】智能体按钮',
                data_id: assistantState.id
              })

              if (!hasFuncPermission([Func.assistant.edit])) {
                return
              }
              setEditShow(true)
            }}
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2 14V11L11 2L14 5L5 14H2Z"
              stroke="#7587A5"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path d="M11 8L8 5" stroke="#7587A5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M9 14L14 14" stroke="#7587A5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        {/* dialog */}
        {editShow && (
          <CreateApplication
            open={editShow}
            setOpen={setEditShow}
            obj={assistantState}
            dropList={SearchListDialog}
            onSave={handleEditSave}
          ></CreateApplication>
        )}
      </div>
      <div className="flex gap-[24px]">
        <div
          className={`board-switch-title ${activeType === 'edit' ? 'board-switch-title-activated' : ''}`}
          onClick={() => setActiveType('edit')}
        >
          配置
        </div>
        {/* <div
          className={`board-switch-title ${activeType === 'board' ? 'board-switch-title-activated' : ''}`}
          onClick={() => {
            if (!hasFuncPermission([Func.assistant.dashboard])) {
              return
            }
            setActiveType('board')
          }}
        >
          数据
        </div> */}
      </div>
      <div className="flex">
        <Button
          className="closeBtnStyles closeBtnWid"
          shape="round"
          onClick={onSave}
          style={{ color: '#131921', marginRight: '10px' }}
        >
          {t('build.save')}
        </Button>
        <div className="flexRow" ref={propsRef}>
          <ThemeBtn
            loading={topLineLoading}
            className="closeBtnWid"
            onClick={onLine}
            style={{ color: '#FFFFFF', margin: '0' }}
          >
            {t('build.online')}
          </ThemeBtn>
        </div>
      </div>
    </div>
  )
}
